import 'package:flutter/material.dart';

class GoodsItem {
  final String title;
  final String imageUrl;
  final int price;

  GoodsItem(this.title, this.imageUrl, this.price);
}

final List<GoodsItem> goodsList = [
  GoodsItem(
    'SHARENOW天然乳胶记忆棉卷包独立弹簧五星级十大酒店席梦思床垫加厚品牌 超软F款-店长推荐【总统套房】云垫-约30cm厚 1350mm*2000mm',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/253156/25/15157/108237/678de537F69a12512/18c6070207554cf6.jpg!q70.dpg.webp',
    10,
  ),
  GoodsItem(
    'SHARE NOW天然乳胶记忆棉卷包独立弹簧五星级十大酒店席梦思床垫加厚品牌 超软F款-店长推荐【总统套房】云垫-约30cm厚 1350mm*2000mm',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/253156/25/15157/108237/678de537F69a12512/18c6070207554cf6.jpg!q70.dpg.webp',
    10,
  ),
  GoodsItem(
    'SHARE NOW天然乳胶记忆棉卷包独立弹簧五星级十大酒店席梦思床垫加厚品牌 超软F款-店长推荐【总统套房】云垫-约30cm厚 1350mm*2000mm',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/253156/25/15157/108237/678de537F69a12512/18c6070207554cf6.jpg!q70.dpg.webp',
    10,
  ),
  GoodsItem(
    'SHARE NOW天然乳胶记忆棉卷包独立弹簧五星级十大酒店席梦思床垫加厚品牌 超软F款-店长推荐【总统套房】云垫-约30cm厚 1350mm*2000mm',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/253156/25/15157/108237/678de537F69a12512/18c6070207554cf6.jpg!q70.dpg.webp',
    10,
  ),
  GoodsItem(
    'SHARE NOW天然乳胶记忆棉卷包独立弹簧五星级十大酒店席梦思床垫加厚品牌 超软F款-店长推荐【总统套房】云垫-约30cm厚 1350mm*2000mm',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/253156/25/15157/108237/678de537F69a12512/18c6070207554cf6.jpg!q70.dpg.webp',
    10,
  ),
  GoodsItem(
    '【国家补贴15%】摩飞电饭煲家用2-3-4个人电饭锅0氟涂层',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/292274/13/370/470814/680cae2dFf996a678/52c93b27b2bdd9d4.png.webp',
    10,
  ),
  GoodsItem(
    '【国家补贴15%】摩飞电饭煲家用2-3-4个人电饭锅0氟涂层',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/292274/13/370/470814/680cae2dFf996a678/52c93b27b2bdd9d4.png.webp',
    10,
  ),
  GoodsItem(
    '【国家补贴15%】摩飞电饭煲家用2-3-4个人电饭锅0氟涂层',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/292274/13/370/470814/680cae2dFf996a678/52c93b27b2bdd9d4.png.webp',
    10,
  ),
  GoodsItem(
    '【国家补贴15%】摩飞电饭煲家用2-3-4个人电饭锅0氟涂层',
    'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/292274/13/370/470814/680cae2dFf996a678/52c93b27b2bdd9d4.png.webp',
    10,
  ),
  // 其他商品项...
];

class GoodsList extends StatefulWidget {
  const GoodsList({super.key});

  @override
  State<GoodsList> createState() => _GoodsList();
}

class _GoodsList extends State<GoodsList> {
  final _controller = TextEditingController(text: '鞋子');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,
        backgroundColor: Colors.white,
        leading: IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back)),
        title: Padding(
          padding: EdgeInsets.only(right: 10),
          child: TextField(
            controller: _controller,
            decoration: InputDecoration(
              hintText: '请输入搜索内容',
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30.0), // 圆角半径
              ),
              suffixIcon: _controller.text.isNotEmpty
                  ? IconButton(
                      icon: Icon(Icons.clear),
                      onPressed: () => _controller.clear(),
                    )
                  : null,
              filled: true,
              // 启用背景填充:ml-citation{ref="1" data="citationList"}
              fillColor: Colors
                  .grey[100], // 背景色:ml-citation{ref="1" data="citationList"}
            ),
            // decoration: InputDecoration(hintText: '搜索...'),
            // onChanged: (value) => setState,
          ),
        ),
      ),
      body: Column(
        children: [
          SizedBox(
            width: double.infinity,
            height: 50,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                TextButton(
                  onPressed: () {},
                  child: Text('综合', style: TextStyle(color: Colors.black)),
                ),
                TextButton(
                  onPressed: () {},
                  child: Text('销量', style: TextStyle(color: Colors.black)),
                ),
                Row(
                  children: [
                    TextButton(
                      onPressed: () {},
                      child: Row(
                        children: [
                          Text('价格', style: TextStyle(color: Colors.black)),
                          Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                ' ▲',
                                style: TextStyle(
                                  fontSize: 8,
                                  color: Colors.black,
                                ),
                              ),
                              Text(
                                ' ▼',
                                style: TextStyle(
                                  fontSize: 8,
                                  color: Colors.black,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                TextButton(
                  onPressed: () {},
                  child: Text('筛选', style: TextStyle(color: Colors.black)),
                ),
              ],
            ),
          ),
          //商品列表
          Expanded(
            child: ListView.builder(
              itemCount: goodsList.length,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(color: Colors.grey, width: 1),
                    ),
                  ),
                  height: 126,
                  child: GestureDetector(
                    onTap: () {
                      Navigator.pushNamed(context, '/goods/detail');
                    },
                    child: Row(
                      children: [
                        Image.network(goodsList[index].imageUrl),
                        Expanded(
                          child: Container(
                            padding: EdgeInsets.only(left: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  maxLines: 2,
                                  overflow: TextOverflow.ellipsis,
                                  softWrap: true,
                                  goodsList[index].title,
                                ),
                                Text('${goodsList[index].price}￥'),
                                Text('2000+条评论 好评率98%'),
                                Text('KAPPA卡帕其简单 >'),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
